<template>
  <div>
    <a-modal v-model="visible" centered :title="false" :footer="null" width="70vw" @cancel="close" :destroyOnClose="true">
      <a-carousel arrows dots-class="slick-dots slick-thumb" ref="varousel" :class="sw ? 'slick-dots-bottom-s' : null">
        <div slot="prevArrow" class="custom-slick-arrow" style="left: 25px;">
          <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 25px;">
          <a-icon type="right-circle" />
        </div>
        <a slot="customPaging" slot-scope="props">
          <img :src="getImgUrl(props.i)" class="dots-imgs" />
        </a>
        <div v-for="(item, index) in imgList" :key="index" class="carousel-imgs">
          <img :src="item" />
        </div>
      </a-carousel>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    visibleImgs: {
      type: Boolean,
      default: false
    },
    imgList: {
      type: Array,
      default: null
    },
    goToIndex: {
      type: Number,
      default: 0,
      required: false
    }
  },
  data() {
    return {
      visible: false,
      windowWidth: document.documentElement.clientWidth,
      sw: false
    }
  },
  watch: {
    visibleImgs(value, oldvalue) {
      this.visible = value
      if (value) {
        if (this.windowWidth < 768) {
          this.sw = true
        } else {
          this.sw = false
        }
        setTimeout(() => {
          this.$refs.varousel.goTo(this.goToIndex, true)
        }, 200)
      }
    }
  },
  methods: {
    // 查看大图
    getImgUrl(i) {
      return this.imgList[i]
    },
    // 关闭弹窗
    close() {
      this.$emit('closeBig', false)
    }
  }
}
</script>
<style lang="less" scoped>
.ant-carousel {
  .carousel-imgs {
    height: 60vh;
    overflow: hidden;
    img {
      height: 90%;
      width: 100%;
      object-fit: scale-down;
      margin: 0 auto;
    }
  }
  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
    object-fit: scale-down;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  .slick-active {
    .dots-imgs {
      border: 1px solid #1890ff;
    }
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 50px;
    li {
      margin: 0 5px;
    }
  }
}
.slick-dots-bottom-s {
  /deep/ .slick-dots-bottom {
    display: flex !important;
    overflow-x: auto;
    height: 60px;
    bottom: 0px;
  }
}
</style>

